<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>Mega Menu 示例</title>
  </head>
  <body>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: sans-serif;
        background: #f5f5f5;
      }

      .container {
        display: flex;

        position: relative;
      }

      /* 左侧导航栏 */
      .sidebar {
        width: 200px;
        background: #333;
        color: white;
        overflow-y: auto;
      }

      .nav-item {
        padding: 12px 16px;
        cursor: pointer;
        border-bottom: 1px solid #444;
      }

      .nav-item:hover,
      .nav-item.active {
        background-color: #007acc;
      }

      /* 子菜单容器 */
      .submenu {
        position: absolute;
        top: 0;
        left: 200px;
        width: 600px;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: none;
        padding: 20px;
        z-index: 100;
      }

      .submenu.show {
        display: block;
      }

      .submenu-columns {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
      }

      .submenu-section {
        width: 45%;
      }

      .submenu-section h4 {
        font-size: 15px;
        margin-bottom: 8px;
        color: #222;
      }

      .submenu-group {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 16px;
        margin-bottom: 16px;
      }

      .submenu-item {
        cursor: pointer;
        color: #007acc;
      }

      .submenu-item:hover {
        text-decoration: underline;
      }

      /* 图片区域 */
      .image-panel {
        flex: 1;
        padding: 20px;
        overflow-y: auto;
        background: #fff;
      }

      .image-panel h3 {
        margin-bottom: 10px;
      }

      .image-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
      }

      .image-grid img {
        object-fit: cover;
        border: 1px solid #ccc;
        border-radius: 6px;
      }
    </style>
    <div class="container" id="menu-area">
      <!-- 左侧导航栏 -->
      <div class="sidebar" id="sidebar">
        <div class="nav-item" data-category="surgery">手术科</div>
        <div class="nav-item" data-category="imaging">功能检查</div>
        <div class="nav-item" data-category="material">医用耗材</div>
        <div class="nav-item" data-category="emergency">急救系统</div>
        <div class="nav-item" data-category="lab">实验仪器</div>
        <div class="nav-item" data-category="rehab">康复理疗</div>
        <div class="nav-item" data-category="icu">重症监护</div>
        <div class="nav-item" data-category="neuro">神经外科</div>
        <div class="nav-item" data-category="ortho">骨科器械</div>
        <div class="nav-item" data-category="ent">耳鼻喉科</div>
      </div>

      <!-- 子菜单 -->
      <div class="submenu" id="submenu">
        <div class="submenu-columns" id="submenu-content">
          <!-- JS 注入 -->
        </div>
      </div>

      <!-- 图片区域 -->
      <div class="image-panel">
        <div class="image-grid" id="image-grid"></div>
      </div>
    </div>

    <script>
      const navData = {
        surgery: {
          基础器械: ["手术刀", "剪刀", "止血钳", "缝合针", "手术钳", "镊子"],
          显微外科: ["显微镜", "操作臂", "显微器械", "显微台"],
          手术设备: ["注射泵", "电刀", "无影灯", "麻醉机", "呼吸机"],
          手术消毒: ["洗手池", "紫外线灯", "消毒柜", "清洗机"],
        },
        imaging: {
          X射线: ["拍片机", "移动DR", "骨密度仪", "数字X光机"],
          超声: ["黑白超", "彩超", "心脏超声", "探头", "便携超声"],
          CT: ["16排CT", "64排CT", "128排CT", "CT配件"],
          MRI: ["1.5T MRI", "3T MRI", "磁共振床", "注射泵"],
        },
        material: {
          一次性耗材: [
            "注射器",
            "输液器",
            "导尿管",
            "留置针",
            "采血管",
            "冲洗器",
          ],
          敷料: ["纱布", "绷带", "创口贴", "压脉带", "止血棉"],
          防护: ["手术衣", "隔离服", "面罩", "防护镜"],
        },
        emergency: {
          基础急救: ["心肺复苏仪", "氧气瓶", "急救包", "急救担架"],
          电气急救: ["电击除颤仪", "止血带", "血压计", "吸痰器"],
        },
        lab: {
          分析仪器: ["血液分析仪", "尿液分析仪", "生化仪", "离心机"],
          实验配件: ["试管架", "滴定管", "试剂瓶", "烧杯"],
        },
        rehab: {
          理疗仪器: ["红外理疗", "磁疗", "电刺激", "超声波治疗仪"],
          康复辅助: ["步行辅助器", "轮椅", "助行器", "功能训练器"],
        },
        icu: {
          监护设备: ["心电监护仪", "血氧仪", "呼吸机", "输液泵"],
          生命支持: ["除颤器", "高流量呼吸机", "麻醉机"],
        },
        neuro: {
          神经设备: ["脑电图机", "神经探测仪", "微创手术工具"],
          定位辅助: ["术中导航", "影像配准", "神经刺激仪"],
        },
        ortho: {
          骨科器械: ["拉钩", "锯刀", "打钉枪", "骨锤", "钢板", "螺钉"],
          矫形辅助: ["矫形支架", "髋关节模具", "石膏绷带"],
        },
        ent: {
          耳鼻喉设备: ["耳镜", "鼻镜", "喉镜", "电凝设备", "吸引器"],
          检查配件: ["压舌板", "检查灯", "喉钳"],
        },
      };

      const images = {};
      for (const cat of Object.values(navData)) {
        for (const items of Object.values(cat)) {
          for (const item of items) {
            images[
              item
            ] = `https://via.placeholder.com/150x100?text=${encodeURIComponent(
              item
            )}`;
          }
        }
      }

      const sidebar = document.getElementById("sidebar");
      const submenu = document.getElementById("submenu");
      const submenuContent = document.getElementById("submenu-content");
      const imageGrid = document.getElementById("image-grid");

      sidebar.addEventListener("mouseover", (e) => {
        const item = e.target.closest(".nav-item");
        if (item) {
          const category = item.dataset.category;
          renderSubmenu(category);
        }
      });

      // 渲染子菜单
      function renderSubmenu(category) {
        submenuContent.innerHTML = ""; // 清空当前的子菜单内容

        const group = navData[category]; // 获取分类对应的数据

        // 找到当前对应的导航项
        const activeItem = sidebar.querySelector(
          `[data-category="${category}"]`
        );
        if (activeItem) {
          const sidebarRect = sidebar.getBoundingClientRect();
          const itemRect = activeItem.getBoundingClientRect();

          // 设置 submenu 的 top，使其与左侧导航栏对齐
          submenu.style.top = `${itemRect.top - sidebarRect.top}px`;
        }

        for (const title in group) {
          const section = document.createElement("div");
          section.className = "submenu-section";
          section.innerHTML = `<h4>${title}</h4>`;
          const groupEl = document.createElement("div");
          groupEl.className = "submenu-group";
          group[title].forEach((item) => {
            const el = document.createElement("span");
            el.className = "submenu-item";
            el.textContent = item;
            el.onclick = () => {
              showImages(category); // 点击分类时，传递整个分类名（如 'surgery'）
              submenu.classList.remove("show");
            };
            groupEl.appendChild(el);
          });
          section.appendChild(groupEl);
          submenuContent.appendChild(section);
        }

        submenu.classList.add("show");
      }

      // 显示图片函数
      function showImages(category) {
        imageGrid.innerHTML = ""; // 清空现有的图片

        const group = navData[category]; // 获取当前分类的数据

        // 遍历所有产品，展示图片和名称
        for (const title in group) {
          group[title].forEach((item) => {
            const img = images[item]; // 获取每个产品的图片

            if (img) {
              const wrapper = document.createElement("div");
              wrapper.style.display = "flex";
              wrapper.style.flexDirection = "column";
              wrapper.style.alignItems = "center";

              const el = document.createElement("img");
              el.src = "QQ_1745058435836.png"; // 使用产品对应的图片
              el.style.width = "150px";
              el.style.objectFit = "cover";
              el.style.border = "1px solid #ccc";
              el.style.borderRadius = "6px";

              const label = document.createElement("div");
              label.textContent = item; // 显示产品名称
              label.style.marginTop = "8px";
              label.style.fontSize = "14px";
              label.style.color = "#333";
              label.style.textAlign = "center";

              wrapper.appendChild(el);
              wrapper.appendChild(label);
              imageGrid.appendChild(wrapper);
            }
          });
        }
      }
    </script>
  </body>
</html>
